<template>
	<view>
		<view class="swiperItem">
			<uni-swiper-dot class="uni-swiper-dot-box" @clickItem=clickItem :info="info" :current="current" :mode="mode"
				:dots-styles="dotsStyles" field="content">
				<swiper class="swiper-box" @change="change" :current="swiperDotIndex">
					<swiper-item v-for="(item, index) in info" :key="index">
						<view class="swiper-item" :class="'swiper-item' + index">
							<!-- 绑定image组件的src属性到item.image -->
							<image class="image" :src="item.image" mode="aspectFill" />
						</view>
					</swiper-item>
				</swiper>
			</uni-swiper-dot>
		</view>
		<view class="shopIntro">
			<view class="shopName">
				<text>小王汽车美容店</text>
			</view>
			<view class="shopRate">
				<uni-rate :readonly="true" :value="2" />
				<text> 3分</text>
				<text>销量：322</text>
			</view>
			<view class="shopTime">
				<text>营业时间：周一至周五</text>
				<text>09:00 - 22:00</text>
			</view>
			<view class="address"> 
				<text>山阳区人民中路32号</text>
				<uni-icons type="paperplane" size="24" color="#0084FF" @click="viewMap"></uni-icons>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				info: [{
						image: '/static/swiper1.png',
					},
					{
						image: '/static/swiper2.png',
					},
					{

						image: '/static/swiper3.png',
					},
					{

						image: '/static/swiper4.png',
					},
					{

						image: '/static/swiper5.png',
					}
				],
				dotStyle: [{
						backgroundColor: 'rgba(0, 0, 0, .3)',
						border: '1px rgba(0, 0, 0, .3) solid',
						color: '#fff',
						selectedBackgroundColor: 'rgba(0, 0, 0, .9)',
						selectedBorder: '1px rgba(0, 0, 0, .9) solid'
					}

				],
				current: 0,
				mode: 'default',
				dotsStyles: {},
				swiperDotIndex: 0
			}
		},
		onLoad() {

		},
		methods: {

			change(e) {
				this.current = e.detail.current
			},
			clickItem(e) {
				this.swiperDotIndex = e
			},
			viewMap() {
				console.log('点击查看门店位置')
			}
		}
	}
</script>

<style>
	.swiper-box {
		height: 200px;
	}

	.swiper-item {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: column;
		justify-content: center;
		align-items: center;
		height: 225px;
		color: #fff;
	}

	.image {
		width: 376px;
	}

	@media screen and (min-width: 500px) {
		.uni-swiper-dot-box {
			width: 400px;
			margin: 0 auto;
			margin-top: 8px;
		}

		.image {
			width: 100%;
		}
	}

	.shopIntro {
		padding: 10px;
		background-color: #fff;
	}

	.shopName {
		width: 123px;
		height: 23px;
		font-size: 16px;
		font-weight: bold;
	}

	.shopRate {
		display: flex;
		/* 启用Flexbox布局 */
		align-items: center;
		/* 垂直居中对齐 */
		justify-content: flex-start;

		/* 水平方向从起始位置开始排列 */
		uni-rate {
			margin-right: 10px;
			/* 给评分和文本之间添加间隔 */
		}
	}

	.shopRate text :nth-child(1) {
		margin-left: 10px;
		/* 根据需要调整间隔大小 */
		color: #6C6C6C;
	}

	.shopTime {
		width: 228px;
		height: 28px;
		margin-top: 5px;
	}

	.address text {
		margin-left: 10px;
	}
</style>